<!-- Detail -->
<template>
  <div class="app-container">
    <div>
      <el-input v-model="searchForm.title" style="width: 200px; margin: 0 10px 0 0" placeholder="商品名称" clearable />
      <el-input v-model="searchForm.classify" style="width: 200px; margin: 0 10px 0 0" placeholder="分类" clearable />
      <el-input v-model="searchForm.price" style="width: 200px; margin: 0 10px 0 0" placeholder="价格" clearable />
      <div class="addButton">
        <el-button size="mini" type="primary" @click="getDetailList(1)">查询</el-button>
        <el-button type="primary" @click="dialog.visible = true">新增化妆品</el-button>
      </div>
    </div>
    <el-table
      v-loading="loading"
      :data="tableData.list"
      style="width: 100%;"
    >
      <el-table-column
        width="50"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="editDialog(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        label="商品标题"
        width="350"
      >
        <template slot-scope="scope">
          <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="price"
        label="价格"
        width="120"
      />
      <el-table-column
        prop="link"
        label="京东链接"
        width="260"
      />
      <el-table-column
        prop="picture"
        label="图片"
      />
    </el-table>

    <el-pagination
      class="pagination"
      layout="prev, pager, next"
      :total="tableData.total"
      @current-change="getDetailList"
      @prev-click="getDetailList"
      @next-click="getDetailList"
    />

    <el-dialog
      v-loading="dialog.loading"
      :title="(isEdit ? '编辑化妆品' : '新增化妆品')"
      :visible.sync="dialog.visible"
      width="50%"
      @close="dialogClose"
    >
      <el-form
        ref="form"
        :model="dialog.form"
        label-width="80px"
        label-position="left"
      >
        <el-form-item label="商品名称" prop="title">
          <el-input v-model="dialog.form.title" />
        </el-form-item>
        <el-form-item label="商品外链" prop="link">
          <el-input v-model="dialog.form.link" />
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input v-model="dialog.form.price">
            <!-- <template slot="prepend">￥</template> -->
          </el-input>
        </el-form-item>
        <el-form-item v-if="!isEdit" label="分类" prop="classify">
          <!-- <el-input v-model="dialog.form.classify" /> -->
          <label slot="label">
            分类
            <el-button
              type="text"
              size="mini"
              @click="addClassify()"
            >
              新增
            </el-button>
          </label>
          <el-form
            label-width="150px"
            label-position="right"
          >
            <el-form-item v-for="(item, index) in dialog.form.classify" :key="index">
              <label slot="label">
                <el-select v-model="item.classify" @change="classifyChange(index, item.classify)">
                  <el-option
                    v-for="(citem, cindex) in classifyList"
                    :key="cindex"
                    :label="citem.classify"
                    :value="citem.content"
                    :disabled="disabledList.includes(citem.content)"
                  />
                </el-select>
              </label>
              <el-select v-model="item.content" :disabled="!item.classify" multiple>
                <el-option
                  v-for="(citem, cindex) in classifyList[item.current].list"
                  :key="cindex"
                  :label="citem.value"
                  :value="citem.key"
                />
              </el-select>
              <el-button v-show="dialog.form.classify.length > 1" type="text" style="color: #f56c6c; margin: 0 10px" @click="delClassifyItem(index)">删除</el-button>
            </el-form-item>
          </el-form>
        </el-form-item>
        <el-form-item label="展示图">
          <el-button v-if="!dialog.form.picture" @click="uploadPicture()">点击上传</el-button>
          <span v-else>{{ dialog.form.picture }}<el-button type="text" style="float: right;" @click="uploadPicture()">修改</el-button></span>
          <input id="imageUpload" type="file" style="display: none" accept="image/*">
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="handleType">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Detail',
  data() {
    return {
      loading: true,
      searchForm: {
        title: '',
        price: '',
        classify: ''
      },
      tableData: {
        total: 20
      },
      classifyList: [{ list: [] }],
      disabledList: [],
      isEdit: false,
      dialog: {
        loading: false,
        form: {
          title: '',
          classify: [{
            classify: '',
            content: '',
            current: 0
          }],
          price: null,
          link: null,
          picture: null
        },
        visible: false
      }
    }
  },
  created() {
    this.getClassifyList()
    this.getDetailList(1)
  },
  mounted() {
  },
  methods: {
    getClassifyList() {
      this.request({
        url: '/parameter/classify-list',
        method: 'GET'
      }).then(res => {
        this.classifyList = res.data
      })
    },
    addClassify() {
      this.dialog.form.classify.push({
        classify: '',
        content: '',
        current: 0
      })
    },
    delClassifyItem(index) {
      this.dialog.form.classify.splice(index, 1)
      this.disabledList = this.dialog.form.classify.map(item => item.classify)
    },
    classifyChange(index, content) {
      console.log(index, content)
      this.classifyList.filter((item, iindex) => {
        if (item.content === content) this.dialog.form.classify[index].current = iindex
      })
      this.disabledList = this.dialog.form.classify.map(item => item.classify)
    },
    uploadPicture() {
      const image = document.getElementById('imageUpload')
      image.addEventListener('change', () => {
        this.upload = image.files[0]
        const form = new FormData()
        form.append('image', this.upload)
        // form.append('name', this.tokenInfo.name)
        this.dialog.loading = true
        this.request({
          url: '/parameter/detail-picture-upload',
          method: 'POST',
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          data: form
        }).then(res => {
          if (res.code === 200) {
            this.dialog.form.picture = res.data.url
          }
        }).finally(
          () => {
            // 初始化上传
            const image = document.getElementById('imageUpload')
            image.value = ''
            this.dialog.loading = false
            // image.outerHTML = image.outerHTML
          }
        )
      })
      image.click()
    },
    editDialog(data) {
      this.isEdit = true
      console.log(data)
      this.dialog.form = JSON.parse(JSON.stringify(this.dialog.form))
      this.dialog.form.detailId = data.detail_id
      this.dialog.form.title = data.title
      this.dialog.form.link = data.link
      this.dialog.form.price = '' + data.price.slice(1)
      this.dialog.form.picture = data.picture
      this.dialog.visible = true
    },
    handleType() {
      if (this.isEdit) {
        this.editDetail()
      } else {
        this.addDetail()
      }
    },
    editDetail() {
      this.dialog.loading = true
      this.request({
        url: '/parameter/detail-edit',
        method: 'POST',
        data: this.dialog.form
      }).then(res => {
        if (res.code === 200) {
          this.$message.success('编辑成功')
          this.getDetailList(1)
          this.dialog.form = {
            detailId: '',
            title: '',
            classify: [{
              classify: '',
              content: '',
              current: 0
            }],
            price: null,
            link: null,
            picture: null
          }
          this.dialog.visible = false
          this.isEdit = false
        }
      }).finally(() => {
        this.dialog.loading = false
      })
    },
    addDetail() {
      console.log(this.dialog.form)
      this.dialog.loading = true
      this.request({
        url: '/parameter/detail-add',
        method: 'POST',
        data: this.dialog.form
      }).then(res => {
        if (res.code === 200) {
          this.$message.success('新增成功')
          this.getDetailList(1)
          this.dialog.form = {
            title: '',
            classify: [{
              classify: '',
              content: '',
              current: 0
            }],
            price: null,
            link: null,
            picture: null
          }
          this.dialog.visible = false
          this.disabledList = []
        }
      }).finally(() => {
        this.dialog.loading = false
      })
    },
    dialogClose() {
      this.dialog.form = {
        title: '',
        classify: [{
          classify: '',
          content: '',
          current: 0
        }],
        link: null,
        picture: null
      }
      this.dialog.visible = false
    },
    getDetailList(page) {
      this.loading = true
      this.request('/parameter/detail-list', {
        method: 'GET',
        params: {
          title: this.searchForm.title,
          price: this.searchForm.price,
          classify: this.searchForm.classify,
          total: 10,
          pagination: page || this.tableData.pagination || 1
        }
      }).then(res => {
        if (res.code === 200) {
          this.tableData = res.data
        }
      }).finally(
        this.loading = false
      )
    }
  }
}
</script>
<style lang='scss' scoped>
.addButton {
  position: absolute;
  top: 25px;
  right: 20px;
  z-index: 1000;
}
.pagination {
  margin: 10px 0;
  float: right;
}
</style>
